<template>		
	<div class="screen_wrap echarts_box">
        <corner></corner>
		<div class="data">
			<!--<chartNum></chartNum>-->
            <div class="right" style="width: 405px;">
		    	 <div class="headline">			  	    	 	 
		    	 	 <span class="title">数据总量</span>			  	    	 	 
		    	 </div>  
                 <div>
                 	<chartNum></chartNum>
                 </div>	            	
            </div>            
		</div>	  
        <div class="bar">
            <corner></corner>
        	<div class="city">
        		<div class="title">        			
        			<img src="/img/bigScreen/23.png" alt="" style="width: 24px;height: 24px;display: block;margin-right: 10px;"/>        			
        			<div>江苏点位分布</div>
        		</div>
        		<div v-for="(item,index) in jiangsuData" class="section">
        			<div><img src="/img/bigScreen/21.png" alt="" /></div>
        			<div  style="margin-left: 10px;">
        				<span style="margin-right: 10px;">{{item.regionName}}</span>
        				<span>{{item.siteCount}}</span>
        			</div>
        		</div>
        	</div>
        </div>	
        <div class="legend">
        	<div class="section" v-for="(item,index) in legendList">
        		<div class="bg" :style="{ background: item.bg }"></div>
        		<div>{{item.value}}</div>
        	</div>       	
        </div>        
        <e-chart :options="option" style="height:100%;width: 100%;"></e-chart>		
	</div>	

</template>

<script>
	import chartNum from '../public/chartNum.vue'
	import 'echarts/map/js/china.js'
	import { getChinaMap2,getCityDataSiteStatistics } from "@/api/bigScreen/bigScreen"
    import dataJSon from "@/api/bigScreen/data"   
	import corner from '../public/corner' 
	export default {
		components: {
			corner,chartNum
		},				
		data() {
			return {
				option: null,
				coords:[],
				points:[],
				zoom:0.85,
				left:'-2%',
				top:'15%',
				colorConfig:['#54c5be','#9dd43d','#e1be31','#fb592d'],
				legendList:[
					{bg:'#fb592d',value:'200以上'},
					{bg:'#e1be31',value:'100-200'},
					{bg:'#9dd43d',value:'10-100'},
					{bg:'#54c5be',value:'1-10'}
				],				
				centerGeo:[120.299,31.568],
				barCategory:[],
				barValue:[],
				option2:null,
				jiangsuData:[],
				timer:null,
		    }
		},		
		mounted() {		
             this.dataInit()
		},
		methods: {	
			checkArrbycity(field,arr){
				let num=-1
				for(var i=0;i<arr.length;i++){
					if(field.indexOf(arr[i].cityname)>=0){
						num=i
						break
					}
				}
				return num
			},
			dataInit(){		
				getCityDataSiteStatistics().then(res=>{
					let arr=res.data.data
					arr.forEach(item=>{	
						if(item.province=='江苏省'){
							this.jiangsuData=item.citys
						}
						let index=this.checkArrbycity(item.province,dataJSon.points)
						if(index>-1){
							dataJSon.points[index].dataNumber=item.num
							this.barCategory.push(item.province)
							this.barValue.push(item.num)
						}						
					})	
					dataJSon.points.forEach(item=>{
						if(item.dataNumber!=0){									
	                        let obj = Object.assign({}, item)
	                        let coordsObj={coords: [],lineStyle: {color: ''}}
	                    	coordsObj.coords.push(obj.value)
	                    	coordsObj.coords.push(this.centerGeo)      
	                        if(obj.dataNumber<=10){
	                        	obj.itemStyle.color=this.colorConfig[0]
	                        	coordsObj.lineStyle.color=this.colorConfig[0]
	                        }else if(obj.dataNumber<=100){
	                        	obj.itemStyle.color=this.colorConfig[1]
	                        	coordsObj.lineStyle.color=this.colorConfig[1]
	                        }else if(obj.dataNumber<=200){
	                        	obj.itemStyle.color=this.colorConfig[2]
	                        	coordsObj.lineStyle.color=this.colorConfig[2]
	                        }else{
	                        	obj.itemStyle.color=this.colorConfig[3]
	                        	coordsObj.lineStyle.color=this.colorConfig[3]
	                        }
	                        this.points.push(obj)
	                        this.coords.push(coordsObj)
						}					
					})
					
					this.init()
				})	
			},
			init() {
				getChinaMap2().then(res => {
					let geoJson = res.data
					this.$echarts.registerMap('china', geoJson);
					let option = {
                        title: [
						],							
						// 柱状图位置设置
						grid: {
							right: '5%',
							top: '50%',
							bottom: '8%',
							width: '16%'
						},						
						xAxis: {
							show:false,
							type: 'value',
							scale: true,
							position: 'top',
							min: 0,
							boundaryGap: false,
							splitLine: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								margin: 1,
								textStyle: {
									color: '#aaa'
								}
							},
						},						
						yAxis: {
							type: 'category',
							nameGap: 16,
							axisLine: {
								show: false,
								lineStyle: {
									color: '#ddd'
								}
							},
							axisTick: {
								show: false,
								lineStyle: {
									color: '#ddd'
								}
							},
							axisLabel: {
								interval: 0,
								textStyle: {
									color: '#15FEFE'
								}
							},
							inverse: true,//倒叙
							data: this.barCategory
						},						
						geo: {
							map: 'china',
							aspectScale: 0.75, //长宽比
							zoom: this.zoom,
							roam: false,
							left:this.left,
							top:this.top,
							itemStyle: {
								normal: {									
									areaColor: {
										type: 'radial',
										x: 0.5,
										y: 0.5,
										r: 0.8,
										colorStops: [{
											offset: 0,
											color: '#09132c' // 0% 处的颜色
										}, {
											offset: 1,
											color: '#274d68' // 100% 处的颜色
										}],
										globalCoord: true // 缺省为 false
									},
									shadowColor: 'rgb(58,115,192)',
									shadowOffsetX: 10,
									shadowOffsetY: 11
								},
								emphasis: {
									areaColor: '#2AB8FF',
									borderWidth: 0,
									color: 'green',
									label: {
										show: false
									}
								}
							},
							regions: [{
								name: '南海诸岛',
								itemStyle: {
									areaColor: 'rgba(0, 10, 52, 1)',
									borderColor: 'rgba(0, 10, 52, 1)',
									normal: {
										opacity: 0,
										label: {
											show: false,
											color: "#009cc9",
										}
									}
								},
							}],
						},
						series: [{
								zoom: this.zoom,
								map: 'china', //使用							
								type: 'map',
								left:this.left,
								top:this.top,
								roam: false,
								label: {
									normal: {
										show: true,
										formatter:(params)=>{
											if(params.name=='江苏'){
												return '无锡'
											}else{
												return params.name
											}
										},
										// 地图字体颜色
										textStyle: {
											color: '#15FEFE'
										}										
									},
									emphasis: {
										textStyle: {
											color: 'rgb(183,185,14)'
										}
									}
								},
								// 地图设置
								itemStyle: {
									normal: {
										borderColor: 'rgb(147, 235, 248)',
										borderWidth: 1,
										areaColor: {
											type: 'radial',
											x: 0.5,
											y: 0.5,
											r: 0.8,
											colorStops: [{
												offset: 0,
												color: '#09132c' // 0% 处的颜色
											}, {
												offset: 1,
												color: '#274d68' // 100% 处的颜色
											}],
											globalCoord: true // 缺省为 false
										},
									},
									emphasis: {
										areaColor: 'rgb(46,229,206)',										   
										borderWidth: 0.1
									}
								}
								
							}, {
								type: 'effectScatter',
								coordinateSystem: 'geo',
								showEffectOn: 'render',
								zlevel: 1,								
								rippleEffect: {
									period: 15,
									scale: 4,
									brushType: 'fill'
								},
								hoverAnimation: true,
								label: {
									normal: {
										formatter: '{b}',
										position: 'right',
										offset: [0, 0],
										color: '#1DE9B6',
										show: true
									},
								},
								itemStyle: {
									normal: {
										color: '#1DE9B6',
										shadowBlur: 10,
										shadowColor: '#333'
									}
								},
								symbolSize: 12,
								data: this.points
							}, 
							
							//地图线的动画效果
							{
								type: 'lines',
								zlevel: 2,
								// 地图轨迹设置
								effect: {
									show: true,
									period: 2, //箭头指向速度，值越小速度越快
									trailLength: 0.5, // 特效尾迹长度[0,1]值越大，尾迹越长重
									symbol: 'arrow', //箭头图标
									symbolSize: 7, //图标大小
								},
								lineStyle: {
									normal: {
										width: 1, //线条宽度
										opacity: 0.1, //尾迹线条透明度
										curveness: .3 //尾迹线条曲直度
									}
								},
								data: this.coords
							},							
							// 柱状图
							{
								zlevel: 1.5,
								type: 'bar',
								barMaxWidth: 8,
								symbol: 'none',
								itemStyle: {
									normal: {
										label:{
				                           show: true,		//开启显示
				                           position: 'right',	//在上方显示
				                           textStyle: {	    //数值样式
				                               color: this.$fontColor,
				                               fontSize: 12
				                           }											
										},
										color: function(params){
					                        if(params.value<=10){
					                        	return '#54c5be'
					                        }else if(params.value<=100){
                                                return '#9dd43d'
					                        }else if(params.value<=200){
                                                return '#e1be31'
					                        }else{
                                                return '#fb592d'
					                        }											
										},
										barBorderRadius: [0, 30, 30, 0]
									}
								},
								data: this.barValue
							}							

						]

					}
					this.option = option
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.data {
		position: absolute;
		height: 100px;
		width: 100%;
		z-index: 1;
		display: flex;
		top: 10px;
		left: 10px;
	}
	.bar{width: 170px;height: 230px;background: rgba(0,0,0,0.35);position: absolute;top: 5%;right: 4%;border:1px solid rgba(31,48,61,0.65);}
	.city{padding: 15px;color: #15FEFE;
	  .title{margin-bottom: 10px;display: flex;align-items: center;}
	  .section{display: flex;margin-bottom: 5px;font-size: 14px}
	}
	
	.legend{position: absolute;width: 100px;height: 100px;bottom: 20px;left: 20px;
	  .section{display: flex;align-items: center;color: #15FEFE;font-size: 12px;margin-bottom: 8px;}
	  .bg{width: 25px;height: 15px;border-radius: 4px;margin-right: 4px;}	
	}
</style>